<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{background: #075498 url(images/top.jpg) no-repeat center top;}
			div,p,a{margin: auto;text-decoration:none;}
			a{color:white}
			#title{font-family:Microsoft YaHei,黑体,宋体,sans-serif;font-size:48px;line-height:123px;color: white;}
			#ul li{list-style:none;float:left;padding:15px;font-size:18px;color:white}
			#svn{font-size:12px}
			#content{height:2000px;padding:20px;background:url(images/articlebg.png);box-shadow:0px 1px 10px #075498;}
			#blog{background:#94BCE0 ;width:920px;height: 450px;overflow: hidden;box-shadow:0px 1px 10px #075498;padding:20px;}
			#blog .threepage{width:270px;height:430px;background:#ececec;display:inline-block;border:solid 10px white;margin:0 6.7px 0;float:left;overflow:hidden}
			#blog .threepage img{width:270px;height:255px;}
			#blog .threepage p{font-size:14px;color:#226039;line-height:26px;text-align:center}
			#blog .threepage p:nth-child(3){color:#666}
			#blog  #firstpage{}
			#moment{heiht:2000px;}
			#moment #timebox{width:121px;height:1036px;background:#94BCE0;float:left;border-right:8px solid #afdcf8;border-left:20px solid #94BCE0}
			#moment #timebox #watch{height:206px;background:#94BCE0}
			#moment #timebox #watch p{text-align:right;width:90px;color:#bdd0db}
			#moment #timebox #date:hover{background:#afdcf0;}
			#moment #timebox #date #p1{font-size:14px;color:#dae1e4}
			#moment #timebox #date #p2{font-size:25px;color:#3594cb}
			#moment #timebox #date:hover #p1{color:white;}
			#moment #timebox #date:hover #p2{color:#6cbfee}
			#yuanxing{width:14px;height:14px;background:#46a4da;position:relative;float:right;left:16px;margin-top:10px;
			border:5px solid white;border-radius:50%;}
			#timecontent{width:811px;background:#94BCE0;float:left}
			#timecontent a{padding:10px;background:#075498;display:block;float:right;margin-top:24px;margin-right:24px}
			#timecontent a:hover{background:blue;}
			
		</style>
	</head>
	<body>
		<div style="width:1000px;height:9999px;">
			<div id="top" style="height: 216px;">
				<div>
					<p id="title">CHEN-泽鑫の博客</p>
					<ul id="ul" style="padding-left:0px">
						<li style="padding-left:0px"><a href="#">首页</a></li>
						<li><a href="#">关于我</a></li>
						<li><a href="#">慢生活</a></li>
						<li><a href="#">碎语闲言</a></li>
						<li><a href="#">我的爱情</a></li>
						<li><a href="#">真挚的友谊</a></li>
					</ul>
				</div>
			</div>
			<div id="content">
				<div id="blog">
					<div class="threepage" id="firstpage">
						<img src="images/IMG_5296.JPG" style=""></img>
						<p>灯具公司复古风格PSD设计稿</p>
						<p style="text-align:left">此模板为PSD设计稿，复古风格。首页主要突出产品，以及公司简介。手绘灯作为头部背景图片，这个比较特别。html可以做出灯一闪一闪的效果，或者说旁边有个按钮...</p>
					</div>
					<div class="threepage" id="secondpage">
						<img src="images/IMG_5518.JPG">
						<p>灯具公司复古风格PSD设计稿</p>
						<p>一共是四个页面，首页，图文列表，图片列表，文字内容。此模板风格为中国古典风格，山水画墨迹成就一幅江南墨卷。页面首页设计较为简单，突出文章重点。图文列表显示...</p>
					</div>
					<div class="threepage" id="threethpage">
						<img src="images/IMG_5297.JPG">
						<p>灯具公司复古风格PSD设计稿</p>
						<p>一共是四个页面，首页，图文列表，图片列表，文字内容。此模板风格为中国古典风格，山水画墨迹成就一幅江南墨卷。页面首页设计较为简单，突出文章重点。图文列表显示...</p>
					</div>
				</div>
				<div id="moment">
					
					<div id="timebox">
						<div id="watch">
							<div id="date" style="border-top-left-radius:60px;border-bottom-left-radius:60px;">
								<div id="yuanxing"></div>
								<p id="p1" style="">08-08</p>
								<p id="p2" style="">2018</p>	
							</div>
						</div>
						<div id="watch">
							<div id="date" style="border-top-left-radius:60px;border-bottom-left-radius:60px;">
								<div id="yuanxing"></div>
								<p id="p1" style="">08-08</p>
								<p id="p2" style="">2018</p>	
							</div>
						</div>
						<div id="watch">
							<div id="date" style="border-top-left-radius:60px;border-bottom-left-radius:60px;">
								<div id="yuanxing"></div>
								<p id="p1" style="">08-08</p>
								<p id="p2" style="">2018</p>	
							</div>
						</div>
						<div id="watch">
							<div id="date" style="border-top-left-radius:60px;border-bottom-left-radius:60px;">
								<div id="yuanxing"></div>
								<p id="p1" style="">08-08</p>
								<p id="p2" style="">2018</p>	
							</div>
						</div>
						<div id="watch">
							<div id="date" style="border-top-left-radius:60px;border-bottom-left-radius:60px;">
								<div id="yuanxing"></div>
								<p id="p1" style="">08-08</p>
								<p id="p2" style="">2018</p>	
							</div>
						</div>
					</div>
					
					<div id="timecontent">
						<div id="sanjiao" style="width:0;border:14px solid #94BCE0;float:left;border-right:13px solid #579dc5;margin-top:8px"></div>
						<div id="content" style="width:720px;height:157px;background:#579dc5;float:left;margin-bottom:10px">
						<h2 style="margin-top:10px;color:white;font:16px 微软雅黑 bold">三步实现滚动条触动css动画效果</h2>
						<img src="images/t01.jpg" style="width:188px;height:122px;float:left"></img>
						<span style="display:block;margin-left:206px;font-size:14px;color:white;width:450px">现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果，ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力...</span>
						<a href="#" id="readmore" style=>阅读更多</a>
					</div>
					<div id="timecontent">
						<div id="sanjiao" style="width:0;border:14px solid #94BCE0;float:left;border-right:13px solid #579dc5;margin-top:8px"></div>
						<div id="content" style="width:720px;height:157px;background:#579dc5;float:left;margin-bottom:10px">
						<h2 style="margin-top:10px;color:white;font:16px 微软雅黑 bold">三步实现滚动条触动css动画效果</h2>
						<img src="images/t02.jpg" style="width:188px;height:122px;float:left"></img>
						<span style="display:block;margin-left:206px;font-size:14px;color:white;width:450px">现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果，ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力...</span>
						<a href="#" id="readmore" style=>阅读更多</a>
					</div>
					<div id="timecontent">
						<div id="sanjiao" style="width:0;border:14px solid #94BCE0;float:left;border-right:13px solid #579dc5;margin-top:8px"></div>
						<div id="content" style="width:720px;height:157px;background:#579dc5;float:left;margin-bottom:10px">
						<h2 style="margin-top:10px;color:white;font:16px 微软雅黑 bold">三步实现滚动条触动css动画效果</h2>
						<img src="images/t03.jpg" style="width:188px;height:122px;float:left"></img>
						<span style="display:block;margin-left:206px;font-size:14px;color:white;width:450px">现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果，ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力...</span>
						<a href="#" id="readmore" style=>阅读更多</a>
					</div>
					<div id="timecontent">
						<div id="sanjiao" style="width:0;border:14px solid #94BCE0;float:left;border-right:13px solid #579dc5;margin-top:8px"></div>
						<div id="content" style="width:720px;height:157px;background:#579dc5;float:left;margin-bottom:10px">
						<h2 style="margin-top:10px;color:white;font:16px 微软雅黑 bold">三步实现滚动条触动css动画效果</h2>
						<img src="images/p05.jpg" style="width:188px;height:122px;float:left"></img>
						<span style="display:block;margin-left:206px;font-size:14px;color:white;width:450px">现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果，ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力...</span>
						<a href="#" id="readmore" style=>阅读更多</a>
					</div>
					<div id="timecontent">
						<div id="sanjiao" style="width:0;border:14px solid #94BCE0;float:left;border-right:13px solid #579dc5;margin-top:8px"></div>
						<div id="content" style="width:720px;height:157px;background:#579dc5;float:left;margin-bottom:10px">
						<h2 style="margin-top:10px;color:white;font:16px 微软雅黑 bold">三步实现滚动条触动css动画效果</h2>
						<img src="images/p04.jpg" style="width:188px;height:122px;float:left"></img>
						<span style="display:block;margin-left:206px;font-size:14px;color:white;width:450px">现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果，ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力...</span>
						<a href="#" id="readmore" style=>阅读更多</a>
					</div>
				</div>
			</div>
			
		</div>
	</body>
</html>
